<template>
  <div class="form">
      <h3>分类添加</h3>
     <el-form  :model="formData" label-width="100px" class="add" label-position="right">
     
        <el-form-item label="分类名称:" class="username">
          <el-input v-model="formData.z1" placeholder="请输入分类名称"></el-input>
        </el-form-item>
         <el-form-item>
          <el-button type="primary" @click="add">立即修改</el-button>
          <el-button @click="$router.push('/type')">取消</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data () {
    return {
      formData: {
        z1: ''
      }
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
      getData () {
        axios.get('/api/biao4detail?id=' + this.$route.query.id).then(({data})=>{
          this.formData = data.data
        })
      },
      add () {
        // 点击添加  向后端发送请求
        // console.log('点击添加');
        // console.log(this.formData.date.toLocaleDateString())  
        axios.post('/api/biao4change', {
          id: this.$route.query.id,
          ...this.formData
        }).then(({data})=>{
          if (data.code == 200) {
            this.$message({
              message: '修改成功',
              type: 'success',
              duration: 1000,
              onClose: ()=>{
                this.$router.push('/type')
              }
            })
          }
        })
      }
    }
}
</script>

<style scoped>
 .avatar-uploader >>> .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader >>> .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
.form{
  background: #fff;
  padding: 15px;
}
.add{
  margin-top: 30px;
}
.username{
  width: 300px;
}
</style>